/* Light Theme */

:root{
    /////////////////////////////////////////////////////////////
    // Color palette generation
    // Use defineColorHSL to generate an 11 shade palette for a color.
    // @include defineColorHSL(colorname, hue, saturation, lightness)
    // @param colorname
    //      Type: string
    //      expects a CSS custom property name starting with --
    // @param hue
    //      Type: integer
    //      expects an integer 0-255
    // @param saturation
    //      Type: percentage
    //      expects a percentage 0-100%
    // @param lightness
    //      Type: percentage
    //      expects a percentage 0-100%
    // @returns 11 CSS Custom Properties available in :root
    //      named colorname-0 through colorname-10
    //      The HSL you provide in the parameters will be in the
    //      middle of the range at -5.
    // Example 
    // @include defineColorHSL(--myschool-gray, 214, 3%, 55%);
    //      returns --myschool-gray-5: hsl(214, 3%, 55%;
    //
    // In addition to the primary branding color defined here, Sakai comes 
    // predefined with gray, blue, teal, gold, green, orange,
    // purple, and red palettes available for you to use.
    // More info about defineColorHSL in sass/themes/_base.scss
    @include defineColorHSL(--sakai-brand, 203, 76%, 25%);
    /////////////////////////////////////////////////////////////

    /////////////////////////////////////////////////////////////
    // Main theme definition
    // Start by defining the variables below to create
    // your theme. If advanced customization is necessary,
    // continue to the remaining variables.
    /////////////////////////////////////////////////////////////

    // Logo
    --logo: url(./images/sakaiLogoBlack.png);
    --logo-height: 30px;
    --logo-width: 103px;
    --logo-opacity: 1;
    --logo-background-color: var(--sakai-primary-color-1);

    .logo-light {
        display: block;
    }
    .logo-dark {
        display: none;
    }

    // Primary branding color. 
    // Suggested: Your institution's main branding color.
    // Used in the top header, action buttons, etc. Commonly used as the background
    // color with white text color.
    --sakai-primary-color-1: var(--sakai-brand);

    // Default: A slightly darker shade of --sakai-primary-color-1
    // Used for hover effects and higher contrast with white text color
    --sakai-primary-color-2: var(--sakai-brand--darker-2);

    // Default: A slightly darker shade of --sakai-primary-color-2
    // Used for active, focus, selected effects
    --sakai-primary-color-3: var(--sakai-brand--darker-3);

    // Default: A very light tint of --sakai-primary-color-1. 
    // Suggested: A light tint of your institution's main branding color.
    // Used to highlight active/current site in favorites and active/current tool in toolmenu
    // Commonly used with white background color with white text color.
    --sakai-active-color-1: var(--sakai-brand--lighter-6);

    // Default: A slightly darker shade of --sakai-active-color-1
    // Used for hover effects and higher contrast with --sakai-text-color-3
    --sakai-active-color-2: var(--sakai-brand--lighter-5);

    // Default: A slightly darker shade of --sakai-active-color-2
    // Used for active, focus, selected effects with --sakai-text-color-3
    --sakai-active-color-3: var(--sakai-brand--lighter-4);

    // Default: A very light tint of gray. 
    // Suggested: --sakai-color-gray--lighter-6.
    // Used as background for non-active/current site in favorites and buttons
    // Commonly used with dark text color.
    --sakai-passive-color-1: var(--sakai-color-gray--lighter-6);

    // Default: A slightly darker shade of --sakai-passive-color-1
    // Used for hover effects and higher contrast with --sakai-text-color-1
    --sakai-passive-color-2: var(--sakai-color-gray--lighter-5);

    // Default: A slightly darker shade of --sakai-passive-color-2
    // Used for active, focus, selected effects with --sakai-text-color-1
    --sakai-passive-color-3: var(--sakai-color-gray--lighter-4);

    // Primary background color. 
    // Suggested: white
    // Used on the body and main content containers
    --sakai-background-color-1: var(--sakai-color-white);

    // Default: A slightly darker shade of --sakai-background-color-1
    // Used in hover effects of --sakai-background-color-1, alternating table rows
    --sakai-background-color-2: var(--sakai-color-gray--lighter-7);

    // Default: A slightly darker shade of --sakai-background-color-2
    // Used for active, focus, selected effects of --sakai-background-color-1
    // and hover effects of --sakai-background-color-2
    --sakai-background-color-3: var(--sakai-color-gray--lighter-6);

    // Default: A slightly darker shade of --sakai-background-color-3
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-4: var(--sakai-color-gray--lighter-5);

    // Default: A slightly darker shade of --sakai-background-color-4
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-5: var(--sakai-color-gray--lighter-4);

    // Default: A slightly darker shade of --sakai-background-color-5
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-6: var(--sakai-color-gray--lighter-3);

    // Default: A slightly darker shade of --sakai-background-color-6
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-7: var(--sakai-color-gray--lighter-2);

    // Default: A slightly darker shade of --sakai-background-color-7
    // Used for active, focus, selected effects of --sakai-background-color-3
    // Note: --sakai-background-color-8 is not currently used, it is included to maintain the consistent pattern in the code.
    --sakai-background-color-8: var(--sakai-color-gray--lighter-1);

    // Default: A slightly darker shade of --sakai-background-color-8
    // Used for active, focus, selected effects of --sakai-background-color-3
    --sakai-background-color-9: var(--sakai-color-gray);

    // Secondary color. 
    // Suggested: An alterate branding color distinct from
    // what you select for --sakai-primary-color-1
    // Used in href, new user tutorial, user profile image border
    --sakai-secondary-color-1: var(--sakai-color-blue--darker-2);

    // Tertiary branding color. 
    // Suggested: A third branding color distinct from
    // what you selected for --sakai-primary-color-1 and --sakai-secondary-color-1
    // Used in user profile image border, swapped view
    --sakai-tertiary-color-1: var(--sakai-color-orange--darker-4);

    // Primary border color used across sakai. 
    // Suggested: light gray
    --sakai-border-color: var(--sakai-color-gray--lighter-6);

    // Primary border color used across sakai for things like modals that pop up
    // and need to be distinct from the background color.
    // Suggested: darkish grey
    --sakai-border-color-modal: var(--sakai-color-gray--darker-4);

    // Primary text color used across sakai. 
    // Suggested: dark gray, near black
    // Most commonly used against --sakai-background-color-1
    --sakai-text-color-1: var(--sakai-color-gray--darker-5);

    // Default: A slightly darker shade of --sakai-text-color-1
    // Used in certain hover effects, but NOT a[href] elements
    --sakai-text-color-2: var(--sakai-color-gray--darker-6);

    // Default: A much darker shade of --sakai-primary-color-1
    // Used as text color of active site in favorites, active tool in toolmenu
    --sakai-text-color-3: var(--sakai-brand--darker-3);

    // Default: A slightly lighter shade of --sakai-text-color-1
    // Used to reduce attention of text
    --sakai-text-color-dimmed: var(--sakai-color-gray--darker-4);

    // Default: A lighter shade of --sakai-text-color-1
    // Used to make elements appear disabled or "grayed out"
    --sakai-text-color-disabled: var(--sakai-color-gray--darker-2);

    // Default: --sakai-color-white
    // Used for text color on saturated color backgrounds like primary button, header bar icons
    --sakai-text-color-inverted: var(--sakai-background-color-1);

    /////////////////////End main theme definition/////////////////////

    //Built to be used for box-shadow
    //https://material-components.github.io/material-components-web-catalog/#/component/elevation
    --elevation-0dp: none;
    --elevation-1dp: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --elevation-2dp: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    --elevation-3dp: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    --elevation-4dp: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    --elevation-5dp: 0 3px 5px -1px rgba(0,0,0,.2), 0 5px 8px 0 rgba(0,0,0,.14), 0 1px 14px 0 rgba(0,0,0,.12);
    --elevation-6dp: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    --elevation-7dp: 0 4px 5px -2px rgba(0,0,0,.2), 0 7px 10px 1px rgba(0,0,0,.14), 0 2px 16px 1px rgba(0,0,0,.12);
    --elevation-8dp: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

    --portal-background-color: var(--sakai-background-color-1);
    --portal-mask-background: rgba(0,0,0,0.5);

    /* Tool tabs */
    --tool-background-color: var(--sakai-background-color-1);
    --tool-menu-background-color: var(--sakai-background-color-1);
    --tool-menu-hover-background-color: var(--sakai-background-color-2);
    --tool-menu-color: var(--sakai-text-color-1);
    --tool-border-color: var(--sakai-border-color);
    --tool-tab-text-color: var(--tool-menu-color);
    --tool-tab-background-color: var(--sakai-passive-color-1);
    --tool-tab-border-color: var(--sakai-border-color);
    --tool-tab-hover-text-color: var(--sakai-text-color-3);
    --tool-tab-hover-background-color: var(--sakai-passive-color-2);
    --tool-tab-hover-highlight-color: var(--sakai-active-color-2);
    --tool-tab-active-text-color: var(--sakai-text-color-inverted);
    --tool-tab-active-background-color: var(--sakai-primary-color-1);
    --tool-tab-active-highlight-color:var(--sakai-active-color-3);

    --top-header-background: var(--sakai-background-color-1);
    --top-header-background-logo: var(--top-header-background);
    --top-header-border-color: transparent;
    --top-header-text-color: var(--sakai-text-color-1);
    --top-header-profile-border-color-top: var(--sakai-secondary-color-1);
    --top-header-profile-border-color-right: var(--sakai-secondary-color-1);
    --top-header-profile-border-color-bottom: var(--sakai-tertiary-color-1);
    --top-header-profile-border-color-left: var(--sakai-tertiary-color-1);
    --top-header-profile-border-color-inner: var(--sakai-background-color-1);

    --sites-nav-background: var(--sakai-background-color-1);

    --breadcrumbs-color: var(--sakai-text-color-1);
    --breadcrumbs-tool-color: var(--sakai-primary-color-1);
    --breadcrumbs-hover-color: var(--sakai-primary-color-1);

    /* Link colors */
    --link-color: var(--sakai-primary-color-1);
    --link-active-color: var(--sakai-primary-color-3);
    --link-hover-color: var(--sakai-primary-color-2);
    --link-visited-color: var(--sakai-color-purple);
    --link-background-color: transparent;
    --link-active-background-color: transparent;
    --link-hover-background-color: transparent;

    // Default (non-primary) button design:
    --button-text-color: var(--sakai-text-color-2);
    --button-background: var(--sakai-passive-color-1);
    --button-border-color: var(--sakai-passive-color-2);
    --button-shadow: none;
    // hover and focus states:
    --button-hover-text-color: var(--button-text-color);
    --button-hover-background: var(--sakai-passive-color-2);
    --button-hover-border-color: var(--sakai-passive-color-3);
    --button-hover-shadow: none;
    // active state:
    --button-active-text-color:var(--button-text-color);
    --button-active-background: var(--sakai-passive-color-3);
    --button-active-border-color: var(--button-active-background);
    --button-active-shadow-color: rgba(0,0,0,0);
    --button-active-shadow: none;
    // disabled state:
    --button-disabled-text-color: var(--sakai-text-color-disabled);
    --button-disabled-background: var(--sakai-background-color-2);
    --button-disabled-border-color: var(--sakai-border-color);
    --button-disabled-shadow: none;

    // Primary action button design:
    --button-primary-text-color: var(--sakai-text-color-inverted);
    --button-primary-background: var(--sakai-primary-color-1);
    --button-primary-border-color: var(--button-primary-background);
    --button-primary-shadow: var(--elevation-2dp);
    // hover and focus states for primary action button:
    --button-primary-hover-text-color: var(--button-primary-text-color);
    --button-primary-hover-background: var(--sakai-primary-color-2);
    --button-primary-hover-border-color: var(--button-primary-hover-background);
    --button-primary-hover-shadow: var(--elevation-4dp);
    // active state for primary action button:
    --button-primary-active-text-color: var(--button-primary-text-color);
    --button-primary-active-background: var(--sakai-primary-color-3);
    --button-primary-active-border-color: var(--button-primary-active-background);
    --button-primary-active-shadow: var(--elevation-4dp);
    // actve state for radio button:
    --radio-button-background: var(--button-primary-background);
    // actve state for checkbox:
    --checkbox-background: var(--button-primary-background);

    --instruction-color: var(--sakai-text-color-disabled);

    // Information (info) banner
    --infoBanner-bordercolor: var(--sakai-color-blue--lighter-2);
    --infoBanner-bgcolor: var(--sakai-color-blue--lighter-7);
    --infoBanner-color: var(--sakai-color-blue--darker-3);
    // Success banner
    --successBanner-bordercolor: var(--sakai-color-green--lighter-2);
    --successBanner-bgcolor: var(--sakai-color-green--lighter-7);
    --successBanner-color: var(--sakai-color-green--darker-3);
    // Warning (warn) banner
    --warnBanner-bordercolor: var(--sakai-color-gold--lighter-2);
    --warnBanner-bgcolor: var(--sakai-color-gold--lighter-7);
    --warnBanner-color: var(--sakai-color-gold--darker-4);
    // Error banner
    --errorBanner-bordercolor: var(--sakai-color-red--lighter-2);
    --errorBanner-bgcolor: var(--sakai-color-red--lighter-7);
    --errorBanner-color: var(--sakai-color-red--darker-2);

    /* Swapped 'View As' view */
    --swapped-view-primary: var(--warnBanner-bgcolor);
    /* Admin Become User view */
    --become-user-primary: var(--sakai-color-purple--darker-1);

    --topNav-text-color: var(--sakai-text-color-inverted); // used for links and text in the topNav
    --topNav-border-color: var(--sakai-border-color); // used for topNav spacers

    /* Favorites */
    --sites-nav-background: var(--sakai-background-color-1);

    /* Default state - not selected */
    --sites-nav-menu-item-background: var(--sakai-passive-color-1);
    --sites-nav-menu-item-color: var(--sakai-text-color-1);
    --sites-nav-menu-item-border-color: var(--sites-nav-menu-item-background);
    // Hover
    --sites-nav-menu-item-hover-background: var(--sakai-passive-color-2);
    --sites-nav-menu-item-hover-color: var(--sakai-text-color-2);
    --sites-nav-menu-item-hover-border-color: var(--sites-nav-menu-item-hover-background);
    --sites-nav-menu-item-hover-icon-background: var(--sakai-passive-color-3);
    --sites-nav-menu-item-hover-icon-border-color: var( --sites-nav-menu-item-hover-icon-background);
    // Active
    --sites-nav-menu-item-active-background: var(--sakai-passive-color-3);
    --sites-nav-menu-item-active-border-color: var(--sites-nav-menu-item-active-background);
    --sites-nav-menu-item-active-icon-background: var(--sites-nav-menu-item-active-background);
    --sites-nav-menu-item-active-icon-border-color: var(--sites-nav-menu-item-active-background);
    // Tool menu dropdown
    --sites-nav-submenu-border-color: transparent;
    --sites-nav-submenu-background: var(--sites-nav-menu-item-background);
    --sites-nav-submenu-item-color: var(--sites-nav-menu-item-color);
    --sites-nav-submenu-item-divider-color: var(--sites-nav-submenu-item-color);
    // Hover
    --sites-nav-submenu-item-hover-background: var(--sites-nav-menu-item-hover-background);
    --sites-nav-submenu-item-hover-color: var(--sites-nav-menu-item-hover-color);
    --sites-nav-submenu-item-hover-icon-color: var(--sites-nav-menu-item-hover-color);
    // Active
    --sites-nav-submenu-item-active-background: var(--sites-nav-menu-item-active-background);
    /* End Default state */
    /* Active/Current site */
    --sites-nav-menu-item-selected-background: var(--sakai-active-color-1);
    --sites-nav-menu-item-selected-color: var(--sakai-text-color-3);
    --sites-nav-menu-item-selected-border-color: var(--sites-nav-menu-item-selected-background);
    // Hover
    --sites-nav-menu-item-selected-hover-background: var(--sakai-active-color-2);
    --sites-nav-menu-item-selected-hover-color: var(--sakai-text-color-3);
    --sites-nav-menu-item-selected-hover-border-color: var(--sites-nav-menu-item-selected-hover-background);
    --sites-nav-menu-item-selected-hover-icon-background: var(--sakai-active-color-3);
    --sites-nav-menu-item-selected-hover-icon-border-color: var(--sites-nav-menu-item-selected-hover-icon-background);
    // Active
    --sites-nav-menu-item-selected-active-background: var(--sakai-active-color-3);
    --sites-nav-menu-item-selected-active-border-color: var(--sites-nav-menu-item-selected-active-background);
    --sites-nav-menu-item-selected-active-icon-background: var(--sites-nav-menu-item-selected-active-background);
    --sites-nav-menu-item-selected-active-icon-border-color: var(--sites-nav-menu-item-selected-active-background);
    // Tool menu dropdown
    --sites-nav-submenu-selected-border-color: transparent;
    --sites-nav-submenu-selected-background: var(--sites-nav-menu-item-selected-background);
    --sites-nav-submenu-item-selected-divider-color: var(--sites-nav-menu-item-selected-color);
    // Hover
    --sites-nav-submenu-item-selected-hover-background: var(--sites-nav-menu-item-selected-hover-background);
    --sites-nav-submenu-item-selected-hover-color: var(--sites-nav-menu-item-selected-hover-color);
    --sites-nav-submenu-item-selected-hover-icon-color: var(--sites-nav-menu-item-selected-hover-color);
    // Active
    --sites-nav-submenu-item-selected-active-background: var(--sites-nav-menu-item-selected-active-background);
    /* End Favorites */

    //New sidebar colors
    --site-nav-btn-color: var(--sakai-text-color-2);
    --site-nav-btn-bg: transparent;
    --site-nav-btn-border-color: var(--site-nav-btn-bg);
    --site-nav-btn-hover-color: var(--sakai-text-color-2);
    --site-nav-btn-page-hover-color: var(--sakai-text-color-1);
    --site-nav-btn-page-hover-border: var(--sakai-brand--darker-4);
    --site-nav-btn-hover-bg: var(--sakai-brand--lighter-7);
    --site-nav-btn-hover-border-color: var(--site-nav-btn-hover-bg);
    --site-nav-btn-focus-shadow-rgb: 249, 250, 251;
    --site-nav-btn-active-color: var(--site-nav-btn-color);
    --site-nav-btn-active-bg: var(--sakai-brand--lighter-5);
    --site-nav-btn-active-border-color: var(--site-nav-btn-border-color);
    //--site-nav-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --site-nav-btn-disabled-color: var(--site-nav-btn-color);
    --site-nav-btn-disabled-bg: var(--site-nav-btn-bg);
    --site-nav-btn-disabled-border-color: var(--site-nav-btn-border-color);

    --site-nav-btn-current-color: var(--button-text-color);
    --site-nav-btn-current-bg: transparent;
    --site-nav-btn-current-border-color: var(--site-nav-btn-current-bg);
    --site-nav-btn-current-hover-color: var(--site-nav-btn-current-color);
    --site-nav-btn-current-hover-bg: var(--sakai-brand--lighter-5);
    --site-nav-btn-current-hover-border-color: var(--site-nav-btn-current-hover-bg);
    --site-nav-btn-current-focus-shadow-rgb: 249, 250, 251;
    --site-nav-btn-current-active-color: var(--site-nav-btn-current-color);
    --site-nav-btn-current-active-bg: var(--sakai-brand--lighter-4);
    --site-nav-btn-current-active-border-color: var(--site-nav-btn-current-border-color);
    //--site-nav-btn-current-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --site-nav-btn-current-disabled-color: var(--site-nav-btn-current-color);
    --site-nav-btn-current-disabled-bg: var(--site-nav-btn-current-bg);
    --site-nav-btn-current-disabled-border-color: var(--site-nav-btn-current-border-color);

    --site-nav-bg: var(--sakai-background-color-1);
    --site-nav-color: var(--sakai-text-color-2);
    --site-nav-list-item-bg: var(--site-nav-bg);
    --site-nav-list-item-collapse-bg: var(--sakai-background-color-1);

    --site-nav-list-item-current-bg: var(--sakai-brand--lighter-5);
    --site-nav-list-item-current-collapse-bg: var(--sakai-brand--lighter-6);

    /* All Sites */
    --all-sites-background-color: var(--sakai-background-color-1);
    --all-sites-drop-shadow: var(--elevation-8dp);

    --all-sites-tab-text-color: var(--tool-menu-color);
    --all-sites-tab-background-color: var(--tool-tab-background-color);
    --all-sites-tab-border-color: var(--tool-tab-border-color);

    --all-sites-tab-hover-text-color: var(--tool-tab-hover-text-color);
    --all-sites-tab-hover-background-color: var(--tool-tab-hover-background-color);
    --all-sites-tab-hover-highlight: var(--tool-tab-hover-highlight-color);

    --all-sites-tab-active-text-color: var(--tool-tab-active-text-color);
    --all-sites-tab-active-background-color: var(--tool-tab-active-background-color);
    --all-sites-tab-active-highlight-color: var(--tool-tab-active-highlight-color);

    --all-sites-title-text-color: var(--sakai-text-color-1);

    --all-sites-button-text-color: var(--sakai-text-color-1);
    --all-sites-button-background-color: var(--sakai-background-color-2);
    --all-sites-button-border-color: var(--sakai-border-color);
    --all-sites-button-star-full-color: var(--sakai-color-gold);
    --all-sites-button-star-empty-color: var(--sakai-text-color-1);

    --all-sites-button-selected-text-color: var(--sakai-text-color-3);
    --all-sites-button-selected-background-color: var(--sakai-active-color-1);
    --all-sites-button-selected-border-color: var(--all-sites-button-selected-background-color);
    --all-sites-button-selected-dropdown-color: var(--all-sites-button-selected-text-color);
    --all-sites-button-selected-star-full-color: var(--all-sites-button-star-full-color);
    --all-sites-button-selected-star-empty-color: var(--all-sites-button-star-empty-color);

    --all-sites-button-hover-text-color: var(--sakai-text-color-1);
    --all-sites-button-hover-background-color: var(--sakai-background-color-3);
    --all-sites-button-hover-border-color: var(--all-sites-button-hover-background-color);
    --all-sites-button-hover-dropdown-color: var(--all-sites-button-hover-text-color);
    --all-sites-button-hover-star-full-color: var(--all-sites-button-star-full-color);
    --all-sites-button-hover-star-empty-color: var(--all-sites-button-star-empty-color);

    --all-sites-button-drag-icon-color: var(--sakai-text-color-1);
    --all-sites-button-drag-icon-hover-color: var(--sakai-text-color-1);

    --all-sites-tool-menu-divider-color: var(--sakai-border-color);
    --all-sites-tool-menu-background-color: var(--all-sites-button-background-color);
    --all-sites-tool-menu-text-color: var(--all-sites-button-text-color);
    --all-sites-tool-menu-icon-color: var(--all-sites-button-text-color);
    --all-sites-tool-menu-left-border-color: var(--all-sites-tool-menu-background-color);

    --all-sites-tool-menu-hover-background-color: var(--all-sites-button-hover-background-color);
    --all-sites-tool-menu-hover-text-color: var(--all-sites-button-hover-text-color);
    --all-sites-tool-menu-hover-icon-color: var(--all-sites-button-hover-text-color);
    --all-sites-tool-menu-hover-left-border-color: var(--all-sites-tool-menu-hover-background-color);

    --all-sites-close-action-color: var(--button-text-color);
    --all-sites-close-action-hover-color: var(--button-hover-text-color);

    //Tool menu
    --tool-menu-item-separator-color: transparent;

    //Normal state
    --tool-menu-item-text-color: var(--sakai-text-color-2);
    --tool-menu-item-icon-color: var(--sakai-text-color-1);
    --tool-menu-item-background-color: var(--sakai-background-color-1);
    //Hover
    --tool-menu-item-hover-text-color: var(--tool-menu-item-text-color);
    --tool-menu-item-hover-icon-color: var(--tool-menu-item-icon-color);
    --tool-menu-item-hover-background-color: var(--sakai-background-color-2);
    //Active
    --tool-menu-item-active-text-color: var(--tool-menu-item-text-color);
    --tool-menu-item-active-icon-color: var(--tool-menu-item-icon-color);
    --tool-menu-item-active-background-color: var(--sakai-background-color-3);
    //Hidden - normal state
    --tool-menu-item-hidden-text-color: var(--tool-menu-item-text-color);
    --tool-menu-item-hidden-icon-color: var(--tool-menu-item-icon-color);
    --tool-menu-item-hidden-background-color: var(--tool-menu-item-background-color);
    //Hidden - hover
    --tool-menu-item-hidden-hover-text-color: var(--tool-menu-item-hover-text-color);
    --tool-menu-item-hidden-hover-icon-color: var(--tool-menu-item-hover-icon-color);
    --tool-menu-item-hidden-hover-background-color: var(--tool-menu-item-hover-background-color);
    //Hidden - active
    --tool-menu-item-hidden-active-text-color: var(--tool-menu-item-active-text-color);
    --tool-menu-item-hidden-active-icon-color: var(--tool-menu-item-active-icon-color);
    --tool-menu-item-hidden-active-background-color: var(--tool-menu-item-active-background-color);
    //Selected - normal state
    --tool-menu-item-selected-text-color: var(--sakai-text-color-3);
    --tool-menu-item-selected-icon-color: var(--sakai-text-color-3);
    --tool-menu-item-selected-background-color: var(--sakai-active-color-1);
    //Selected - hover
    --tool-menu-item-selected-hover-text-color: var(--tool-menu-item-selected-text-color);
    --tool-menu-item-selected-hover-icon-color: var(--tool-menu-item-selected-icon-color);
    --tool-menu-item-selected-hover-background-color: var(--sakai-active-color-2);
    //Selected - active
    --tool-menu-item-selected-active-text-color: var(--tool-menu-item-selected-text-color);
    --tool-menu-item-selected-active-icon-color: var(--tool-menu-item-selected-icon-color);
    --tool-menu-item-selected-active-background-color: var(--sakai-active-color-3);
    //Tool menu collapse button - normal state
    --tool-menu-collapse-text-color: var(--tool-menu-item-text-color);
    --tool-menu-collapse-icon-color: var(--tool-menu-item-text-color);
    --tool-menu-collapse-background-color: var(--tool-menu-item-background-color);
    --tool-menu-collapse-shadow: var(--elevation-4dp);
    //Tool menu collapse - hover
    --tool-menu-collapse-hover-text-color: var(--tool-menu-item-hover-text-color);
    --tool-menu-collapse-hover-background-color: var(--tool-menu-item-hover-background-color);
    --tool-menu-collapse-hover-shadow: var(--elevation-6dp);
    //Tool menu collapse - active
    --tool-menu-collapse-active-text-color: var(--tool-menu-item-active-text-color);
    --tool-menu-collapse-active-background-color: var(--tool-menu-item-active-background-color);
    --tool-menu-collapse-active-shadow: var(--elevation-5dp);
    //Tool menu collapse - minimized
    --tool-menu-collapse-min-text-color: var(--tool-menu-collapse-text-color);
    --tool-menu-collapse-min-background-color: var(--tool-menu-collapse-background-color);
    --tool-menu-collapse-min-shadow: var(--tool-menu-collapse-shadow);
    //Tool menu collapse - minimized - hover
    --tool-menu-collapse-min-hover-text-color: var(--tool-menu-collapse-hover-text-color);
    --tool-menu-collapse-min-hover-background-color: var(--tool-menu-collapse-hover-background-color);
    --tool-menu-collapse-min-hover-shadow: var(--tool-menu-collapse-hover-shadow);
    //Tool menu collapse - minimized - active
    --tool-menu-collapse-min-active-text-color: var(--tool-menu-collapse-active-text-color);
    --tool-menu-collapse-min-active-background-color: var(--tool-menu-collapse-active-background-color);
    --tool-menu-collapse-min-active-shadow: var(--tool-menu-collapse-active-shadow);

    //Tool menu - sub menu
    --tool-sub-menu-border-color: var(--sakai-border-color);
    --tool-sub-menu-background-color: var(--tool-menu-item-background-color);

    --tool-sub-menu-hover-color: var(--tool-menu-item-hover-text-color);
    --tool-sub-menu-hover-background-color: var(--tool-menu-item-hover-background-color);

    --tool-sub-menu-current-color: var(--tool-menu-item-selected-text-color);
    --tool-sub-menu-current-background-color: var(--tool-menu-item-selected-background-color);

    --tool-sub-menu-current-hover-color: var(--tool-menu-item-selected-hover-text-color);
    --tool-sub-menu-current-hover-background-color: var(--tool-menu-item-selected-hover-background-color);

    //Tool menu - lessons subpages enabled
    --tool-lessons-toplevel-menu-selected-background-color: var(--tool-menu-item-background-color); //not used??

    --tool-lessons-toplevel-menu-expanded-background-color: var(--tool-menu-item-background-color);
    --tool-lessons-toplevel-menu-expanded-hover-background-color: var(--tool-menu-item-hover-background-color);
    --tool-lessons-toplevel-menu-expanded-selected-background-color: var(--tool-menu-item-selected-background-color);
    --tool-lessons-toplevel-menu-expanded-selected-color: var(--tool-menu-item-selected-color);

    --tool-lessons-toplevel-menu-sliding-background-color: var(--tool-menu-item-background-color);

    --tool-lessons-subpage-menu-selected-background-color: var(--tool-menu-item-selected-background-color);
    --tool-lessons-subpage-menu-selected-parent-background-color: var(--tool-menu-item-background-color);

    --tool-lessons-subpage-menu-expanded-background-color: var(--tool-menu-item-background-color);

    --lessons-item-border-top-color: var(--sites-nav-menu-item-background);
    --lessons-column-border-color: var(--sakai-border-color);
    --lessons-item-hover-background: var(--sakai-background-color-2);
    --lessons-item-hover-shadow: var(--elevation-4dp);

    --siteUnpublish-background: var(--warnBanner-bgcolor);
    --siteUnpublish-color: var(--warnBanner-color);
    --siteUnpublish-border-color:  var(--warnBanner-bordercolor);

    --siteDelete-background: var(--infoBanner-bgcolor);
    --siteDelete-color: var(--infoBanner-color);
    --siteDelete-border-color: var(--infoBanner-bordercolor);

    --footer-background-color: var(--sakai-background-color-1); //not used??
    --footer-border-color: var(--tool-border-color); //not used??

    --footer-color: var(--sakai-text-color-1);
    --footer-link-separator: var(--sakai-border-color);

    --divider-shadow: var(--elevation-2dp);
    --divider-shadow-fixed: 0 1px 0 var(--tool-border-color);

    --overview-portlet-shadow: var(--elevation-2dp);
    --overview-portlet-title-background-color: var(--tool-tab-background-color);

    --focus-outline-color: var(--sakai-color-blue--lighter-3);

    // Dashboard
    --sakai-dashboard-widget-bg-color: var(--sakai-background-color-1);
    --sakai-dashboard-widget-border-color: var(--sakai-border-color);
    --sakai-title-bar-bg-color: var(--sakai-background-color-2);
    --sakai-close-icon-color: var(--errorBanner-color);
    --sakai-table-even-color: var(--sakai-background-color-2);
    --sakai-separator-color: var(--sakai-border-color);
    --sakai-calendar-button-background-color: #FFFFFF;
    --sakai-calendar-button-color: var(--button-text-color);
    --sakai-calendar-button-disabled-color: var(--button-disabled-text-color);
    --sakai-calendar-button-disabled-bg-color: var(--button-disabled-background);
    --sakai-calendar-today-bg-color: var(--sakai-color-blue);
    --sakai-calendar-today-color: var(--sakai-text-color-inverted);
    --sakai-calendar-has-events-bg-color: var(--sakai-color-green--darker-4);
    --sakai-calendar-has-events-fg-color: var(--sakai-text-color-inverted);
    --sakai-grades-count-color: var(--sakai-text-color-dimmed);

    // Jumbotron
    --jumbotron-bg: var(--sakai-color-gray--lighter-6);
    --jumbotron-color: var(--sakai-text-color-1);

    // sakai-options-menu
    --sakai-options-menu-background-color: #D4EBF9;
    --sakai-options-menu-color: black;

    --sakai-user-status-online: var(--sakai-color-green--lighter-2);

    --sakai-popover-background: var(--sakai-background-color-1);
    --sakai-popover-title-background: var(--sakai-background-color-1);
    --sakai-highlight-color: var(--errorBanner-color);

    //Timer progress bar backgrounds
    --timer-bar-full-bg: var(--sakai-color-green);
    --timer-bar-medium-bg: var(--sakai-color-orange);
    --timer-bar-low-bg: var(--sakai-color-red--lighter-1);

    --progress-bar-bg: var(--sakai-color-blue--lighter-6);
    --progress-bar-empty-bg: transparent;

    --sakai-modal-header-bg: var(--sakai-brand);
    --sakai-modal-header-color: #fff;
    --sakai-modal-close-btn-bg: #fff;
    --sakai-modal-content-bg: var(--sakai-background-color-2);
    --sakai-offcanvas-header-bg: var(--sakai-brand);
    --sakai-offcanvas-header-color: #fff;
    --sakai-offcanvas-close-btn-bg: #000;

    --sakai-pin-color: var(--sakai-text-color-2);
    --sakai-pin-hover-color: black;

    --sakai-current-site: transparent;
    --sakai-current-site-color: var(--sakai-text-color-2);
    --sakai-curent-site-border-color: var(--sakai-brand);
    --sakai-selected-page-bg-color: var(--sakai-brand);
    --sakai-selected-page-color: var(--sakai-text-color-inverted);

    --sticky-foooter-color: var(--sakai-brand--lighter-6);
    --sticky-foooter-color-hover: var(--sakai-brand--lighter-6);
    --sticky-footer-bg: var(--site-nav-bg);

    --sakai-thumbnail-background-color: var(--sakai-background-color-1);
    --sakai-thumbnail-border-color: var(--sakai-border-color);

    --sakai-scrollbar-background-color: var(--sakai-border-color);
    --sakai-scrollbar-thumb-color: var(--sakai-brand);
    --sakai-scrollbar-thumb-hover-color: var(--sakai-brand--lighter-3);
}

// Tables
$table-bg-accent: var(--sakai-background-color-2);
$sakai-table-bg-hover: var(--sakai-background-color-2);
$table-border-color: var(--sakai-border-color);
